<script setup lang="ts">
import { ref } from "vue";

import Searchbox from "@/views/components/searchbox/Searchbox.vue";
import OpLog from "@/views/apply/aipr/component/opLog.vue";


defineOptions({
  name: "aipr"
});

const selected = ref(0);

function tabClick({ index }) {
  selected.value = index;
}

const listComponents = [
  {
    key: "OpLog",
    title: "数据列表",
    component: OpLog
  },
];


const searchFields = ref(  [
  {
    prop:
      'name',
    name: '名称',
    type: 'input'
  },
  {
    prop: 'status',
    name: '状态',
    type: 'select',
    formOptions: [
      { val: 1, label: '启用' },
      { val: 0, label: '禁用' }
    ]
  },
  {
    prop: 'createTime',
    name: '创建时间',
    type: 'dateRange'
  },
  {
    prop: 'department',
    name: '部门',
    type: 'treeSelect',
    ops: {
      primaryField: 'id',
      parentField: 'pid',
      name: 'deptName'
    },
    treeFormOptions: [
      { id: 1, deptName: '技术部', pid: 0, children: [] },
    ]
  }
])

const handleSearch = (e:any) => {
  console.log(e)
}

const handleReset = (e:any) => {
  console.log(e)
}

</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <Searchbox
          :fields= searchFields
          :maxVisibleFields=3
          @search="handleSearch"
          @reset="handleReset"
        />
      </div>
    </template>

    <el-tabs @tab-click="tabClick" >
      <template v-for="(item, index) of listComponents" :key="item.key">
        <el-tab-pane :lazy="true">
          <template #label>
            <span
              v-tippy="{
                maxWidth: 'none',
                content: `${item.title}`
              }"
            >
              {{ item.title }}
            </span>
          </template>
          <keep-alive>
            <component :is="item.component" :key="item.key" v-show="selected == index" />
          </keep-alive>
        </el-tab-pane>
      </template>
    </el-tabs>

  </el-card>
</template>

<style scoped lang="scss">

</style>

